<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <meta charset="UTF-8">
    <title>商品页</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>
        .layui-table tr{
            height: 50px;
        }
        .layui-table-cell{
            height: 50px;
        }
    </style>
</head>
<body>
<!--  头部按钮工具栏  -->
<script id="toptools" type="text/html">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            <input type="text" name="text" placeholder="请输入查询内容" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-input-inline">
            <button type="button" class="layui-btn" lay-event="check">查询</button>
            <button type="button" class="layui-btn" lay-event="add">新增</button>
        </div>
    </div>
</script>
    <table class="layui-table" lay-data="{url:'/product/list', page:true, id:'datalist',toolbar:'#toptools'}" lay-filter="datalist">
      <thead>
      <tr>
        <th lay-data="{field:'id', width:80, sort: true}">ID</th>
        <th lay-data="{field:'name', width:80}">货品名</th>
        <th lay-data="{field:'price', width:80, sort: true}">价格</th>
        <th lay-data="{field:'oldprice',sort:true}">旧价格</th>
        <th lay-data="{field:'info',width:300}">信息</th>
        <th lay-data="{templet:'#imgTpl'}">图片</th>
        <th lay-data="{field:'pid', width:140,sort: true}">父级分类</th>
        <th lay-data="{field:'cid', width:140,sort: true}">子级分类</th>
        <th lay-data="{field:'state',width:80, sort: true}">状态</th>
        <th lay-data="{toolbar:'#linetools'}">操作</th>
      </tr>
      </thead>
    </table>
<div class="layui-btn-container" style="padding-left: 30px ">
    <a href="/page/category"><button type="button" class="layui-btn" name="category">分类管理</button></a>
    <a href="/page/order"><button type="button" class="layui-btn" name="order">订单管理</button></a>
</div>
<script type="text/html" id="imgTpl">
    <img src="{{d.defaultimg}}" style="width: 50px;height: 50px">
</script>
    <script src="layui/layui.all.js"></script>
    <!--  编辑数据表单  -->
    <div style="display: none" id="editWin" lay-filter="editWin" class="layui-form">
        <!--  隐藏输入id,否则后台没有id值无法处理   -->
        <input name="id" type="hidden">
        <div class="layui-form-item">
            <label class="layui-form-label">货品名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入货品名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input type="text" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">旧价格</label>
            <div class="layui-input-inline">
                <input type="text" name="oldprice" required lay-verify="required" placeholder="请输入旧价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">信息</label>
            <div class="layui-input-inline">
                <input type="text" name="info" required lay-verify="required" placeholder="请输入货品信息" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                <img src="groceryfile/upload.jpeg" _id="addupload" style="width: 100px;height: 100px;cursor:pointer;">
                <input type="hidden" _id="addimgurl" name="defaultimg" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">一级分类</label>
            <div class="layui-input-inline">
                <select id="pid" name="pid" lay-filter="pid">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">二级分类</label>
            <div class="layui-input-inline">
                <select id="cid" name="cid" lay-filter="cid">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="text" name="state" required lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" lay-submit lay-filter="editsave" class="layui-btn">保存</button>
            <button type="button" class="layui-btn" id="editcancel">取消</button>
        </div>
    </div>

    <!--  新增数据栏  -->
    <div style="display: none" id="addWin" lay-filter="editWin" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">货品名</label>
            <div class="layui-input-inline">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入货品名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-inline">
                <input type="text" name="price" required lay-verify="required" placeholder="请输入价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">旧价格</label>
            <div class="layui-input-inline">
                <input type="text" name="oldprice" required lay-verify="required" placeholder="请输入旧价格" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">信息</label>
            <div class="layui-input-inline">
                <input type="text" name="info"  placeholder="请输入货品信息" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片</label>
            <div class="layui-input-inline">
                <img src="groceryfile/upload.jpeg" _id="addupload" style="width: 100px;height: 100px;cursor:pointer;">
                <input type="hidden" _id="addimgurl" name="defaultimg" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">一级分类</label>
            <div class="layui-input-inline">
                <select name="pid" lay-filter="pidadd">
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">二级分类</label>
            <div class="layui-input-inline">
                <select name="cid" lay-filter="cidadd">

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="text" name="state" required lay-verify="required" placeholder="请输入状态" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" lay-submit lay-filter="addsave" class="layui-btn">保存</button>
            <button type="button" class="layui-btn" id="addcancel">取消</button>
        </div>
    </div>


    <!--  行内按钮工具栏 -->
    <script id="linetools" type="text/html" style="text-align: center">
        <button type="button" class="layui-btn" lay-event="edit">编辑</button>
        <button type="button" class="layui-btn" lay-event="delete">删除</button>
    </script>
    <script>
        const $=layui.$;
        const table=layui.table;
        const layer=layui.layer;
        const form=layui.form;

        //获取子分类信息函数
        function getChildren(id){
            var datalist;
            $.ajax({
                url:"category/getchildren",
                data:{id:id},
                async:false,
                success:function(result){
                    datalist=result;
                }
            });
            return datalist;
        }

        //将查询出的子分类信息显示在下拉框中
        function showitems(id,element){
            let datalist = getChildren(id);
            let $elem = $(element);
            $elem.empty();
            $elem.append("<option value=''></option>");
            for(let i=0;i<datalist.length;i++){
                $elem.append(
                  "<option value='"+datalist[i].id+"'>"+ datalist[i].name+"</option>"
                );
            }
            form.render("select");
        }

        //新增模块的选择框查询
        function showitems_add(id,element){
            let datalist = getChildren(id);
            let $elem = $(element);
            $elem.empty();
            $elem.append("<option value=''></option>");
            for(let i=0;i<datalist.length;i++){
                $elem.append(
                    "<option value='"+datalist[i].id+"'>"+ datalist[i].name+"</option>"
                );
            }
            form.render("select");
        }
        form.on('select(pidadd)',function(data){
            let val = data.value;
            showitems(val,'[name=cid]');
        })
        showitems(-1,"[name=pid]");

        //监听一级分类的改变事件
        form.on('select(pid)',function(data){
            let val = data.value
            showitems(val,'#cid');
        })

        showitems(-1,"#pid");//浏览器刚开始就加载数据顶级分类

        //头部按钮监听事件
        table.on("toolbar(datalist)",function(obj){
            let event=obj.event;
            if(event=='add'){
                layer.open({
                    type:1,
                    title:'新增货品',
                    area:['600px','600px'],
                    content:$("#addWin")
                })
            }else if(event=='check'){
                let text=$("[name='text']").val();
                table.reload("datalist",{where:{'text':text},page:{curr:1}});
            }
        });
        //编辑和删除按钮监听事件
        table.on("tool(datalist)",function(obj){
            let event=obj.event;
            let data=obj.data;
            if(event=='delete'){
                layer.confirm("确认删除本条数据?",function(){
                    $.ajax({
                        url:'product/delete',
                        data:{id:data.id},
                        success:function(){
                            layer.msg("删除成功",{time:1800,icon:1});
                            table.reload("datalist",{page:{curr:1}});
                        }
                    })
                })
            }else if(event=='edit'){
                form.val("editWin",data);
                $("[_id='addupload']").attr("src",data.defaultimg);
                layer.open({
                    type:1,
                    title:'编辑货品信息',
                    area:['600px','600px'],
                    content:$("#editWin")
                })
            }
        })

        //编辑表单中的保存按钮监听事件
        form.on("submit(editsave)",function(data){
          $.ajax({
              url:'product/edit',
              data:data.field,
              success:function(){
                  console.log("编辑表内的数据"+data.field.pid+data.field.cid);
                  layer.closeAll();
                  layer.msg("修改成功",{icon:1,time:1800});
                  table.reload("datalist");
              }
          });
          return false;
        })

        //新增表单中的按钮监听事件
        form.on("submit(addsave)",function(data){
            $.ajax({
                url:'product/add',
                data:data.field,
                success:function(){
                    layer.closeAll();
                    layer.msg("添加成功",{icon:1,time:1800});
                    table.reload("datalist");
                    form.val("addsave", {});
                }
            })
            return false;
        })
        //图片上传
        const upload=layui.upload;
        upload.render({
            elem:"[_id='addupload']",
            url:"file/upload",
            done:function(result){
                let url=result.data;
                $("[_id='addupload']").attr("src",url);
                $("[_id='addimgurl']").val(url);
            },
            error:function(){
                layer.msg("上传失败",{icon:2})
            }
        });
    </script>
</body>
</html>